<template>
  <div class="container">
    <div class="header">
      <a-typography-title
        :style="{ marginRight: 10, fontSize: '18px' }"
        :heading="5"
      >
        领养管理
      </a-typography-title>
      <a-button type="primary" @click="visible = true">申请领养</a-button>
    </div>
    <a-table :columns="columns" :data="data" class="table">
      <template #createTime="{ record }">
        <span>{{ moment(record.createTime).format("YYYY-MM-DD HH:mm") }}</span>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button type="primary" @click="handleApprove(record.id)"
            >审核通过</a-button
          >
          <a-button type="primary" @click="handleReject(record.id)"
            >审核拒绝</a-button
          >
          <a-popconfirm
            content="确定删除吗?"
            ok-text="确实"
            cancel-text="取消"
            @ok="handleDeleteGive(record.id)"
          >
            <a-button type="primary">撤销</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>
    <a-modal v-model:visible="visible" @cancel="handleCancel" @ok="handleOk">
      <template #title> 发布领养 </template>

      <a-form ref="formRef" :model="giveForm" layout="vertical">
        <a-form-item
          field="realName"
          :rules="[{ required: true, message: '请输入姓名' }]"
          :validate-trigger="['blur']"
          label="姓名"
        >
          <a-input v-model="giveForm.realName" placeholder="姓名"> </a-input>
        </a-form-item>

        <a-form-item
          field="sex"
          :rules="[{ required: true, message: '性别' }]"
          :validate-trigger="['change']"
          label="性别"
        >
          <a-radio-group v-modal="giveForm.sex">
            <a-radio value="1">男</a-radio>
            <a-radio value="0">女</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          field="phone"
          :rules="[{ required: true, message: '请输入电话' }]"
          :validate-trigger="['blur']"
          label="电话号码"
        >
          <a-input v-model="giveForm.phone" placeholder="电话"> </a-input>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      v-model:visible="visibleReject"
      title="审批拒绝"
      @cancel="visibleReject = false"
      @ok="handleRejectOk"
    >
      <a-form :model="formReject">
        <a-form-item field="cause" label="拒绝原因">
          <a-input v-model="formReject.cause" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import moment from "moment";
import {
  getGiveList,
  deleteGive,
  createGive,
  approve,
  refuse,
} from "@/api/give";
import {
  adoptData,
  createAdopt,
  adoptReject,
  adoptApprove,
  adoptCancel,
} from "@/api/adopt";
import { Message } from "@arco-design/web-vue";
import { onMounted, reactive, ref } from "vue";
import axios from "axios";
import { getToken } from "@/utils/auth";

const data = ref([]);
let giveForm = reactive({
  realName: "",
  age: "",
  sex: 0,
  phone: "",
});

const formReject = ref({
  applicationId: "",
  cause: "",
});

const visibleReject = ref(false);

const handleRejectOk = () => {
  adoptReject(formReject.value).then((res) => {
    if (res.code === 200) {
      Message.success("拒绝成功");
      fetchData();
    }
  });
};

const visible = ref(false);
const handleCancel = () => {
  visible.value = false;
};
const fetchData = async () => {
  const res = await adoptData({
    pageNum: 1,
    pageSize: 100,
    statusIn: ["unaudited", "reject", "audited", "cancel"],
  });
  if (res?.code === 200) {
    data.value = res?.data?.records;
  }
};

const handleOk = () => {
  visible.value = false;
  createAdopt(giveForm).then((res) => {
    if (res.code === 200) {
      Message.success("发布成功");
      giveForm = null;
      fetchData();
    }
  });
};

const columns = [
  {
    title: "id",
    dataIndex: "id",
  },
  {
    title: "真实姓名",
    dataIndex: "realName",
  },
  {
    title: "性别",
    dataIndex: "sex",
  },
  {
    title: "年龄",
    dataIndex: "age",
  },
  {
    title: "家庭住址",
    dataIndex: "address",
  },
  {
    title: "联系电话",
    dataIndex: "phone",
  },
  {
    title: "邮箱",
    dataIndex: "mail",
  },

  {
    title: "状态",
    dataIndex: "status",
  },
  {
    title: "原因",
    dataIndex: "cause",
  },
  {
    title: "时间",
    dataIndex: "createTime",
    width: 150,
    slotName: "createTime",
  },
  {
    title: "操作",
    slotName: "action",
    width: 100,
  },
];

onMounted(() => {
  fetchData();
});

const handleDeleteGive = async (id: number) => {
  const formData = new FormData();
  formData.append("id", String(id));
  const token = getToken();

  adoptCancel({ applicationId: id }).then((res) => {
    if (res.code == 200) {
      Message.success("撤销成功");
      fetchData();
    }
  });
};

const handleApprove = (id) => {
  adoptApprove({ applicationId: id }).then((res) => {
    if (res.code === 200) {
      Message.success("通过成功");
      fetchData();
    }
  });
};

const handleReject = (id) => {
  visibleReject.value = true;
  formReject.value.applicationId = id;
};
</script>

<style lang="less" scoped>
.container {
  background-color: var(--color-fill-2);
  padding: 16px 20px;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  .table {
    flex: 1;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
